<template>
  <view class="box">
    <view class="toolbar">
      <button @click="handleInsertImage">插入图片</button>
      <button @click="handleFontSize('正')">正</button>
      <button @click="handleFontSize('大','bold')">大</button>
      <button @click="handleFontSize('中','bold')">中</button>
      <button @click="handleFontSize('小','bold')">中</button>
    </view>
    <editor id="editor" class="ql-container container" placeholder="开始输入..." @ready="onEditorReady"></editor>
  </view>
</template>

<script setup>
import {onNavigationBarButtonTap} from '@dcloudio/uni-app';
let editorCtx;
function onEditorReady(){
  let that = this;
  this.createSelectorQuery().select('#editor').context(function (res) {
    that.editorCtx = res.context;
  }).exec();
}

//插入图片
const handleInsertImage = ()=>{
  uni.chooseImage({
    count: 1, //插图图片数量
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album','camera'],       //从相册选择和拍照
    success: function (res) {
      //获得插入图片的临时路径（提交前，要将临时路径更换为网络路径）
      let imageSrc = res.tempFilePaths[0];
      editorCtx.insertImage({
        src: imageSrc,
        width: "100%",
        height: "100%",
        success: function(res){
          console.log("成功插入图片");
        },
        fail: function(res){
          console.log("插入图片失败");
        }
      });
    }
  });
}

const handleFontSize = (type,isBold) => {
  console.log('editorCtx',editorCtx)
  if (isBold) {
    editorCtx.format("bold");
  }
  // if (type === '正') {
  //   editorCtx.format("font-size","12px");
  // } else if ('大') {
  //   editorCtx.format("font-size","18px");
  // } else if ('中') {
  //   editorCtx.format("font-size","16px");
  // } else if ('小') {
  //   editorCtx.format("font-size","14px");
  // }
}
//设置粗体
const handleSetBlod = ()=>{
  editorCtx.format("bold");
}

//设置标题
const handleSetHeader = (value)=>{
  editorCtx.format("header",value);
}
//设置颜色
const handleSetColor = ()=>{
  editorCtx.format("color","red");
}
//设置list
const handleList = (value)=>{
  editorCtx.format("list",value);
}
//撤销上一步
const handlePreviousStep = ()=>{
  editorCtx.undo()
}
//恢复上一步
const handleNextStep = ()=>{
  editorCtx.redo();
}

//点击完成时，提交内容
onNavigationBarButtonTap(()=>{
  //第一，提交图片，将网络路径拿回来（tempSrc假设为拿回来的网络路径）
  let tempSrc = "https://img2.baidu.com/it/u=1010328615,2032873142&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=790";
  editorCtx.getContents({
    success: function(res){
      console.log(res);
      let contentArr = res.delta.ops;
      contentArr.forEach((item)=>{
        if(item.insert.image){
          item.insert.image = tempSrc;
        }
      })
      console.log("重新看一下");
      console.log(res);
      editorCtx.setContents({
        delta: res.delta,
        success: function(res){
          console.log("设置完成");
        }
      });
    }
  });
})

</script>

<style scoped lang="scss">
.box{
  width: 100vw;
  height: 300rpx;
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #ffffff;
  .toolbar{
    padding: 0 20rpx;
    display: flex;
    flex-wrap: wrap;
    padding-top: 16rpx;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    button{
      min-width: 96rpx;
      font-size: 28rpx;
      margin-bottom: 16rpx;
    }
  }
  .container {
    display: flex;
    flex: 0.97;
    background-color: #fff;
    padding: 0 20rpx;
    padding-top: 8rpx;
  }
}

</style>